import { Graph, Shape } from '@antv/x6';

import iconuser from '@/assets/usericon.svg';

export function init() {
  var ports = {
    groups: {
      group1: {
        attrs: {
          circle: {
            magnet: true,
            r: 4,
            fill: '#fff',
          },
        },
        position: 'top',
      },
      group2: {
        attrs: {
          circle: {
            magnet: true,
            r: 4,
            fill: '#fff',
          },
        },
        position: 'right',
      },
      group3: {
        attrs: {
          circle: {
            magnet: true,
            r: 4,
            fill: '#fff',
          },
        },
        position: 'bottom',
      },
      group4: {
        attrs: {
          circle: {
            magnet: true,
            r: 4,
            fill: '#fff',
          },
        },
        position: 'left',
      },
      
    },
    items: [{
      id: 'port1',
      group: 'group1',
      
    }, {
      id: 'port2',
      group: 'group2',
    }, {
      id: 'port3',
      group: 'group3',
    }, {
      id: 'port4',
      group: 'group4',
    }],
  };
  Graph.registerNode(
    'activity',
    {
      ports,
      inherit: 'rect',
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
          selector: 'img',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          stroke: '#222',
          fill: '#fff',
          strokeWidth: 1,
        },
        img: {
          x: 6,
          y: 6,
          width: 16,
          height: 16,
          'xlink:href':iconuser
        },
        label: {
          fontSize: 12,
          fill: '#262626',
        },
      },
      size: {
        width: 100,
        height: 50,
      },
      data:{
        confluenceType:1
      }
    },
    true,
  );
  
}
